<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>主页</title>
		<link rel="stylesheet" type="text/css" href="./layui/css/layui.css"/>
		
	</head>
	<body>
		<div class="layui-row layui-col-space5   layui-bg-gray">
			<div class="layui-col-md3">
				<div class="layui-card ">
				  <div class="layui-card-header">
					 <div class="layui-row">
					 	<div class="layui-col-md11">
					 		<h3>用户访问量</h3>
					 	</div>
						<div class="layui-col-md1">
							<span class="layui-badge layui-bg-blue">周</span>
						</div>
					 </div>
					  
				  </div>
				  <div class="layui-card-body ">
					<ul>
						<li >
							<h1>1,000,000</h1><br>
						</li>
						<li >
							<div class="layui-row">
								<div class="layui-col-md11">
									<h4>总计访问量:</h4>
								</div>
								<div class="layui-col-md1">
									88万
								</div>
							</div>
						</li>
					</ul>
				  </div>
				</div>
			</div>
			
			<div class="layui-col-md3">
				<div class="layui-card ">
				  <div class="layui-card-header">
					 <div class="layui-row">
					 	<div class="layui-col-md11">
					 		<h3>下载</h3>
					 	</div>
						<div class="layui-col-md1">
							<span class="layui-badge layui-bg-green">月</span>
						</div>
					 </div>
					  
				  </div>
				  <div class="layui-card-body ">
					<ul>
						<li >
							<h1>1,000,000</h1><br>
						</li>
						<li >
							<div class="layui-row">
								<div class="layui-col-md11">
									<h4>新下载:</h4>
								</div>
								<div class="layui-col-md1">
									10%
								</div>
							</div>
						</li>
					</ul>
				  </div>
				</div>
			</div>
			
			<div class="layui-col-md3">
				<div class="layui-card ">
				  <div class="layui-card-header">
					 <div class="layui-row">
					 	<div class="layui-col-md11">
					 		<h3>收入</h3>
					 	</div>
						<div class="layui-col-md1">
							<span class="layui-badge layui-bg-orange">年</span>
						</div>
					 </div>
					  
				  </div>
				  <div class="layui-card-body ">
					<ul>
						<li >
							<h1>1,000,000</h1><br>
						</li>
						<li >
							<div class="layui-row">
								<div class="layui-col-md11">
									<h4>总收入:</h4>
								</div>
								<div class="layui-col-md1">
									***
								</div>
							</div>
						</li>
					</ul>
				  </div>
				</div>
			</div>
			
			<div class="layui-col-md3">
				<div class="layui-card ">
				  <div class="layui-card-header">
					 <div class="layui-row">
					 	<div class="layui-col-md11">
					 		<h3>活跃用户</h3>
					 	</div>
						<div class="layui-col-md1">
							<span class="layui-badge layui-bg-black">月</span>
						</div>
					 </div>
					  
				  </div>
				  <div class="layui-card-body ">
					<ul>
						<li >
							<h1>1,000,000</h1><br>
						</li>
						<li >
							<div class="layui-row">
								<div class="layui-col-md11">
									<h4>最近一个月:</h4>
								</div>
								<div class="layui-col-md1">
									15%
								</div>
							</div>
						</li>
					</ul>
				  </div>
				</div>
			</div>
		</div>
		<!-- 图表 -->
		<div class="layui-row layui-bg-gray">
			<div class="layui-col-md12">
				<div class="layui-card">
				  <div class="layui-card-header">
					  访问量
					  <div class="layui-btn-group" style="float: right">
					    <button type="button" class="layui-btn layui-btn-primary layui-btn-xs">
					        去年
					    </button>
					    <button type="button" class="layui-btn layui-btn-primary layui-btn-xs">
							今年
					    </button>
					  </div>
					 
				  </div>
				  <div class="layui-card-body">
				    <div class="layui-row">
				    	<div class="layui-col-md8">
				    		 <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
							<div id="main" style="height:420px;"></div>
				    	</div>
						<div class="layui-col-md4">
							<div class="layui-card">
							  <div class="layui-card-header">
								<h3>月访问量 同上期增长</h3>
							  </div>
							  <div class="layui-card-body">
							    <div class="layui-progress layui-progress-big" lay-showPercent="true">
							      <div class="layui-progress-bar layui-bg-blue" lay-percent="80%"></div>
							    </div>
							  </div>
							</div>
							
							<div class="layui-card">
							  <div class="layui-card-header">
								<h3>月下载量 同上期增长</h3>
							  </div>
							  <div class="layui-card-body">
							    <div class="layui-progress layui-progress-big" lay-showPercent="true">
							      <div class="layui-progress-bar layui-bg-red" lay-percent="10%"></div>
							    </div>
							  </div>
							</div>
							
							<div class="layui-card">
							  <div class="layui-card-header">
								<h3>月收入 同上期增长</h3>
							  </div>
							  <div class="layui-card-body">
							    <div class="layui-progress layui-progress-big" lay-showPercent="true">
							      <div class="layui-progress-bar layui-bg-orange" lay-percent="50%"></div>
							    </div>
							  </div>
							</div>
							
							<div class="layui-card">
							  <div class="layui-card-header">
								<h3>活跃用户 同上期增长</h3>
							  </div>
							  <div class="layui-card-body">
							    <div class="layui-progress layui-progress-big" lay-showPercent="true">
							      <div class="layui-progress-bar layui-bg-green" lay-percent="20%"></div>
							    </div>
							  </div>
							</div>
							
							
						</div>
				    </div>
				  </div>
				</div>
			</div>
		</div>
		<div class="layui-row layui-bg-orange">
			<div class="layui-col-md12">
				测试
			</div>
		</div>
		<div class="layui-row layui-bg-red">
			<div class="layui-col-md12">
				测试
			</div>
		</div>	
		<script src="./layui/layui.all.js" type="text/javascript" charset="utf-8"></script>
		<script src="./js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			// 基于准备好的dom，初始化echarts实例
			        var myChart = echarts.init(document.getElementById('main'));
			
			        // 指定图表的配置项和数据
			        var option = {
			            title: {
			                text: '2020年用户访问量 统计'
			            },
			            tooltip: {},
			            legend: {
			                data:['访问量']
			            },
			            xAxis: {
			                data: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]
			            },
			            yAxis: {},
			            series: [{
			                name: '访问量',
			                type: 'bar',
			                data: [5, 20, 36, 10, 10, 20,40,50,5,60,70,40]
			            }]
			        };
			        // 使用刚指定的配置项和数据显示图表。
			        myChart.setOption(option);
		</script>
	</body>
</html>
